<template>
  <van-sticky>
    <NavBar title="药店列表" :arrow="true" />
    <div class="search_area">
      <div class="search_box">
        <img src="@/assets/shopList/search.png" alt="" />
        <input type="text" class="top_search" placeholder="请输入关键词搜索" />
      </div>
    </div>
    <div class="filter_area">
      <div class="status_filter">
        <p>营业状态</p>
        <img src="@/assets/shopList/desc.png" alt="" />
      </div>
      <div class="distance_filter">
        <p>距离</p>
        <div class="filter_button">
          <img src="@/assets/shopList/asc.png" alt="" />
          <img src="@/assets/shopList/descActive.png" alt="" />
        </div>
      </div>
      <div class="credit_filter">
        <p>信用等级</p>
        <img src="@/assets/shopList/desc.png" alt="" />
      </div>
    </div>
  </van-sticky>

  <div class="medicine_shop_list_area">
    <van-empty
      image="search"
      description="正在加载..."
      v-show="shopListData.length == 0"
    />
    <div class="medicine_shop" v-for="shop in shopListData" :key="shop.id">
      <img class="shop_img" src="" alt="" />
      <div class="medicine_shop_msg">
        <!-- 名字，信用 -->
        <div class="name_credit">
          <div class="name">{{ shop.name }}</div>
          <img
            src="@/assets/shopList/good.png"
            alt=""
            v-if="shop.credit == 1"
          />
          <img
            src="@/assets/shopList/normal.png"
            alt=""
            v-if="shop.credit == 2"
          />
          <img src="@/assets/shopList/bad.png" alt="" v-if="shop.credit == 3" />
        </div>
        <!-- 营业时间，距离 -->
        <div class="time_distance">
          <div class="time">
            <div class="open_24h" v-if="shop.openTime == '24h'">
              <img src="@/assets/shopList/time1.png" alt="" />
              <div>24h营业</div>
            </div>
            <div class="not_24h_open" v-if="shop.openTime != '24h'">
              <img src="@/assets/shopList/time2.png" alt="" />
              <div>{{ shop.openTime }}</div>
            </div>
          </div>
          <div class="distance">
            <img src="@/assets/shopList/distance.png" alt="" />
            <p>距您</p>
            <p class="distance_detail">{{ shop.distance }}</p>
            <p class="km">km</p>
          </div>
        </div>
        <!-- 荣誉 -->
        <div class="honorary_item" v-if="shop.honorary.imgUrl">
          <img :src="shop.honorary.imgUrl" />
          <div class="star">
            <img :src="shop.honorary.starImgUrl" alt="" />
            <p>{{ shop.honorary.star }}星</p>
          </div>
        </div>
        <!-- 属性 -->
        <div class="prop_tag">
          <div v-for="item in shop.tagList" :key="item.id" class="tag_item">
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { shopList } from '@/views/medicineShopList/mock.js'
import { reactive } from 'vue'
export default {
  components: { NavBar },
  setup() {
    let shopListData = reactive(shopList)
    return {
      shopListData,
    }
  },
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.search_area {
  height: 30px;
  background: #ffffff;
  padding: 9.5px 15px;
  .search_box {
    height: 30px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    border-radius: 10px;
    img {
      width: 14.5px;
      height: 14.5px;
      margin-left: 10.5px;
      margin-right: 6.5px;
    }
    .top_search {
      width: 313.4px;
      height: 30px;
      border: none;
      background: #f7f7f7;
      font-size: 14px;
      border-radius: 10px;
      font-weight: 500;
      text-align: left;
      color: #999999;
    }
    ::-webkit-input-placeholder {
      color: #999999;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
.filter_area {
  height: 11.5px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 13.5px 20px 15px 18px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: #333333;
  img {
    width: 9px;
    height: 5px;
    margin-left: 6.5px;
  }
  .status_filter {
    display: flex;
    align-items: center;
    height: 12px;
  }
  .distance_filter {
    display: flex;
    height: 12px;
    align-items: center;
    .filter_button {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 12px;
    }
  }
  .credit_filter {
    display: flex;
    height: 12px;
    align-items: center;
  }
}
.medicine_shop_list_area {
  margin-top: 10px;

  background: #ffffff;

  .medicine_shop {
    display: flex;
    margin-left: 21.5px;
    padding-top: 17.5px;
    padding-bottom: 16.5px;
    border-top: 1px solid #f7f7f7;
    .shop_img {
      width: 75px;
      height: 64px;
    }
    .medicine_shop_msg {
      .name_credit {
        display: flex;
        .name {
          margin-left: 11px;
          margin-right: 13px;
          width: 167px;
          height: 15px;
          font-size: 15px;
          line-height: 15px;
          font-weight: bold;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        img {
          width: 66px;
        }
      }
      .time_distance {
        height: 12.5px;
        display: flex;
        width: 207.5px;
        justify-content: space-between;
        margin-top: 13px;
        margin-bottom: 10px;
        .time {
          .open_24h {
            display: flex;
            align-items: center;
            img {
              width: 13.5px;
              height: 13.5px;
              margin-left: 10px;
              margin-right: 3.5px;
            }
            div {
              width: 47.5px;
              height: 12px;
              line-height: 12px;
              font-size: 12px;
              font-weight: 700;
              text-align: left;
              color: #007afd;
            }
          }
          .not_24h_open {
            display: flex;
            img {
              width: 11.5px;
              height: 11.5px;
              margin-left: 10.5px;
              margin-right: 8.5px;
            }
          }
        }
        .distance {
          display: flex;
          img {
            width: 11px;
            height: 12.5px;
            margin-right: 6px;
            margin-top: 2px;
          }
          p {
            height: 12px;
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            color: #999999;
          }
          .distance_detail {
            color: #007afd;
            margin: 0 5px;
            margin-top: 2px;
          }
          .km {
            margin-top: 2px;
          }
        }
      }
      .honorary_item {
        margin-left: 5px;
        margin-bottom: 5px;
        display: flex;
        img {
          margin-right: 7px;
          height: 17px;
        }
        .star {
          display: flex;
          width: 45.5px;
          height: 17px;
          background: #faf2da;
          border-radius: 2px;
          align-items: center;
          img {
            width: 12px;
            height: 12px;
          }
          p {
            height: 10px;
            font-size: 12px;
            line-height: 12px;
            font-weight: 700;
            color: #d3955e;
            letter-spacing: 1px;
          }
        }
      }
      .prop_tag {
        display: flex;
        margin-left: 3px;
        .tag_item {
          width: 57px;
          height: 17px;
          background: #eaf2ff;
          border-radius: 2px;
          margin-left: 7px;
          p {
            height: 17px;
            font-size: 10px;
            line-height: 17px;
            font-weight: 400;
            text-align: center;
            color: #007afd;
            transform: scale(0.9);
          }
        }
      }
    }
  }
}
</style>
